<template>
  <div>
     <div class="fxpm">
      <div id="futuresTrading" style="width: 600px; height: 300px"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      dataStatus: 0,


    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.futuresTradingAdd();
    });
  },
  methods: {
  
    futuresTradingAdd() {
      let data1 = [
        {
          positionDesiredName: "人力资源要素市场",
          desiredPostCount: 100
        },
        {
          positionDesiredName: "人力资源要素市场",
          desiredPostCount: 90
        },
        {
          positionDesiredName: "人力资源要素市场",
          desiredPostCount: 80
        },
        {
          positionDesiredName: "人力资源要素市场",
          desiredPostCount: 70
        },
        {
          positionDesiredName: "人力资源要素市场",
          desiredPostCount: 60
        },
        {
          positionDesiredName: "人力资源要素市场",
          desiredPostCount: 50
        }
      ];

      data1.forEach((item, index) => {
        item.rank = index + 1;
      });
      var dataTitle = data1.map(item => {
        return item.positionDesiredName;
      });
      //柱状图1
      var histogramChart1 = echarts.init(
        document.getElementById("futuresTrading")
      );
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          },
          formatter: params => {
            return `${data1[index].positionDesiredName}: ${option.series[0].data[index]}`;
          }
        },
        legend: {
          show: false
        },
        grid: {
          top: "8%",
          left: "-20%",
          right: "0%",
          bottom: "3%",
          containLabel: true
          // width:'100%',
        },
        xAxis: {
          show: false,
          type: "value",
          boundaryGap: [0, 0.01],
          axisTick: {
            //轴刻度线
            show: false
          },
          splitLine: {
            //网格线
            show: false
          }
        },
        yAxis: {
          type: "category",
          inverse: true,
          axisLabel: {
            margin: 200,
            textStyle: {
              align: "align",
              // y轴文字设置不同颜色
              color: function(params, index) {
                let colorList = [
                  "#0FCFED",
                  "#36F9BB",
                  "#00FF68",
                  "#FFFD00",
                  "#FF8A31",
                  "#F46A57"
                ];
                return colorList[index];
              },
              fontSize: "14px"
            },
            formatter: function(value) {
              return "{" + value + "|} {s|" + dataTitle[value - 1] + "}";
            },
            rich: {
              1: {
                height: 27,
                width: 23,
                align: "center",
                color: "#FF8A31",
                backgroundColor: {
                  image: require("../../../../assets/img/005_47.png")
                }
              },
              2: {
                height: 27,
                width: 23,
                align: "center",
                backgroundColor: {
                  image: require("../../../../assets/img/004_16.png")
                }
              },
              3: {
                height: 27,
                width: 23,
                align: "center",
                backgroundColor: {
                  image: require("../../../../assets/img/003_75.png")
                }
              },
              4: {
                height: 27,
                width: 23,
                align: "center",

                backgroundColor: {
                  image: require("../../../../assets/img/002_31.png")
                }
              },
              5: {
                height: 27,
                width: 23,
                align: "center",
                backgroundColor: {
                  image: require("../../../../assets/img/001_43.png")
                }
              },
              6: {
                height: 27,
                width: 23,
                align: "center",
                backgroundColor: {
                  image: require("../../../../assets/img/005_47.png")
                }
              }
            }
          },
          data: data1.map(item => item.rank),
          axisTick: {
            //轴刻度线
            show: false
          },
          splitLine: {
            //网格线
            show: false
          },
          axisLine: {
            //y轴线
            show: false
          }
        },
        series: [
          {
            name: "数据",
            type: "bar",
            data: data1.map(item => item.desiredPostCount),
            // 是否在数据点处显示数值
            label: {
              bleedMargin: 10,
              show: true,
              position: "right",
              left: "10%",
              textStyle: {
                fontSize: 16,
                color: "#FEFC0B"
              }
            },
            barWidth: 17,
            itemStyle: {
              emphasis: {
                barBorderRadius: 7
              },
              normal: {
                barBorderRadius: 7,
                // 不同柱体，不同渐变色
                color: function(params) {
                  console.log(params, "0000");
                  var colorList = [
                    ["#1B2F33", "#0FE0FF", "#FFFFFF"],
                    ["#2F4226", "#00FFB5", "#FFFFFF"],
                    ["#1B2F33", "#0FE0FF", "#FFFFFF"],
                    ["#2F4226", "#00FFB5", "#FFFFFF"],
                    ["#1B2F33", "#0FE0FF", "#FFFFFF"],
                    ["#2F4226", "#00FFB5", "#FFFFFF"]
                  ];
                  var colorItem = colorList[params.dataIndex];
                  return new echarts.graphic.LinearGradient(
                    1,
                    0,
                    0,
                    0,
                    [
                      {
                        offset: 0,
                        color: colorItem[2]
                      },
                      {
                        offset: 0.5,
                        color: colorItem[1]
                      },
                      {
                        offset: 1,
                        color: colorItem[0]
                      }
                    ],
                    false
                  );
                }
              }
            }
          }
        ]
      };
      let index = -1;
      this.toolTipTimer = setInterval(selectPie, 1000);
      function leaderShow() {
        // 遍历数据，取消所有图形的高亮效果
        for (var idx in option.series[0].data)
          histogramChart1.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: idx
          });
        histogramChart1.dispatchAction({
          type: "showTip", // 提示框
          seriesIndex: 0,
          dataIndex: index // 第几行柱子高亮
        });
      }
      histogramChart1.on("mouseover", params => {
        // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形
        clearInterval(this.toolTipTimer);
        index = params.dataIndex;
        leaderShow();
      });

      histogramChart1.on("mouseout", params => {
        // 用户鼠标移出时，重新开始自动切换
        if (this.toolTipTimer) {
          clearInterval(this.toolTipTimer);
          this.toolTipTimer = setInterval(selectPie, 1000);
        }
      });
      function selectPie() {
        // 高亮效果切换到下一个图形
        var dataLen = option.series[0].data.length;
        index = (index + 1) % dataLen;
        leaderShow();
      }
      histogramChart1.setOption(option);
    }
  }
};
</script>

<style scoped>
.fxpm {
  width: 600px;
  /* height: 500px; */
  background-color: #000;
  border: 1px solid #000;
}
</style>